<script setup>
    import { ref } from 'vue'
    import { ElMessage } from 'element-plus'

    const form = ref({
        username: '',
        email: '',
        phone: ''
    })

    const submitForm = () => {
        // 这里可以做表单提交的处理
        ElMessage.success('信息修改成功')
    }

</script>

<template>
    <div class="modify-info">
        <el-form :model="form" ref="formRef" label-width="120px" status-icon>
            <el-form-item label="用户名" prop="username">
                <el-input v-model="form.username" placeholder="请输入用户名" />
            </el-form-item>

            <el-form-item label="邮箱" prop="email">
                <el-input v-model="form.email" placeholder="请输入邮箱" />
            </el-form-item>

            <el-form-item label="电话" prop="phone">
                <el-input v-model="form.phone" placeholder="请输入电话" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<style scoped>
    .modify-info {
        padding: 20px;
    }
</style>